<template>
  <div class="m-register">
    <div class="register-mobile" v-show="step==1 ? true : false">
      <img src="../../assets/logo/login_icon.png" class="logo" />
      <van-form @submit="onSubmit">
        <div class="form-group">
          <van-field
              v-model="form.mobile"
              placeholder="请输入手机号码"
              :rules="[{ validator }]"
            />
        </div>
        <van-button round block type="info" :disabled="form.mobile ? false : true"  native-type="submit">获取短信验证码</van-button>
      </van-form>
    </div>
    <div class="register-code" v-show="step==2 ? true : false">
      <div class="register-code-top">
        <div class="register-code-title">输入验证码</div>
        <div class="register-code-send">验证码已发送至 <span>+86 13712345678</span></div>
      </div>
      <div class="input-code">
        <van-password-input
          :value="form.code"
          :mask="false"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
      </div>
      <div class="register-code-repeat">
        <van-count-down :time="10000" ref="countDown" :auto-start="startStatus" format="ss" @finish="finish">
          <template #default="timeData">
            <span class="block">{{ timeData.seconds }}秒后重新发送验证码</span>
          </template>
        </van-count-down>
        <span class="again-code" @click="reset()">重新发送验证码</span>
      </div>
      <van-number-keyboard
        v-model="form.code"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </div>
  </div>
</template>

<script>
  import { Button, Toast, Popup, Uploader, CountDown  } from 'vant'
  export default {
    name: 'Register',
    components:{
      Button,
      Toast,
      Popup,
      Uploader,
      CountDown
    },
    data(){
      return {
        startStatus: false,
        countdown: '',
        step: 1,
        showKeyboard: true,
        form: {
          mobile: undefined,
          code: undefined
        }
      }
    },
    created(){

    },
    methods:{
      start() {
        this.$refs.countDown.start();
      },
      finish() {
        this.startStatus = false
        Toast('倒计时结束');
      },
      reset(){
        this.startStatus = true
        this.$refs.countDown.reset();//先重置
        this.$refs.countDown.start();//后开始
      },
      validator(val) {
        if(val){
          this.step = 2
          this.startStatus = true
          this.start()
        }else{
          Toast('请填写正确手机号');
        }
        return /1\d{10}/.test(val);
      },
      onSubmit(values) {
        console.log('submit', values);
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .m-register {
    text-align: center;
    width: 614px;
    margin: 0 auto;
    .logo {
      width: 126px;
      height: 126px;
      margin: 140px auto 0px;
    }
    .register-mobile {
      .form-group{
        margin-top: 142px;
        margin-bottom: 86px;
        border-bottom:1px solid #E1E1E1;
      }
    }
    .input-code .van-password-input{
      margin: 0;
    }
    .register-code-top {
      margin-top: 160px;
      text-align: left;
      .register-code-title {
        font-size: 42px;
        font-weight: 500;
        color: #222222;
      }
      .register-code-send {
        font-size: 28px;
        font-weight: 400;
        color: #999999;
        margin-bottom: 90px;
        margin-top: 32px;
        span {
          font-size: 28px;
          font-weight: 400;
          color: #222222;
        }
      }
    }
    .register-code-repeat {
      font-size: 28px;
      font-weight: 400;
      color: #1F75F0;
      text-align: left;
      margin-top: 40px;
    }
  }

</style>
